﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="js拖动操作触发事件.aspx.cs" Inherits="js组件_js拖拽_js拖动操作触发事件" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
<!--
.Right_Menu {
	background-color: #FFFFCC;
	float: left;
	height: 500px;
	width: 20%;
	border: 1px dashed #000000;
	overflow: auto;
}
.Menu_Main {
	background-color: #ffffff;
	float: left;
	height: 500px;
	width: 79%;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: dashed;
	border-right-style: none;
	border-bottom-style: dashed;
	border-left-style: dashed;
	border-top-color: #000000;
	border-right-color: #000000;
	border-bottom-color: #000000;
	border-left-color: #000000;
	 
}

-->
</style>

    <script src="ajaxclass.js" type="text/javascript"></script>
<script language="javascript"  type="text/javascript">
//<![CDATA[ 
//通用 移动 Div 类
//请保留一下我的信息,谢谢
//Edit By Skybot
//QQ:35287352
function Tong_MoveDiv()
{	//参数说明
	// id 要移动的层ID 
	// Evt 是 event, window.event; 要在FF 中可以用    e ? e :window.event;
	// T 为 int 有数字是拖动 没有是变大小
	// Panel 为可选的函数 拖动后目标的容器 id
	// fun为处理的方法
	this.Move=function(Id,Evt,T,Panel,fun)
	{
		if(Id=="") return;
		var o = document.getElementById(Id);
		if(!o) return;//如果这个东东不在
		evt = Evt ? Evt : window.event;
		o.style.position = "absolute";//设定他的样式为绝对定位
		o.style.zIndex = 200;//这里显示上下的
		var obj = evt.srcElement ? evt.srcElement : evt.target; //得到个原素  使它在FF中也可以用
		//得到当前对要移动对象的 坐标
		var w = o.offsetWidth;
	    var h = o.offsetHeight;
	    var l = o.offsetLeft;
	    var t = o.offsetTop;
	    var div = document.createElement("DIV");//新原素DIV
		document.body.appendChild(div);
	    div.style.cssText = "filter:alpha(Opacity=10,style=0);opacity:0.2;width:"+w+"px;height:"+h+"px;top:"+t+"px;left:"+l+"px;position:absolute;background:#000";//设定 filter； 注意opacity 是FF中的 Opacity
	    div.setAttribute("id", Id +"temp");
		
		if(T)//看看是拖动还是 变大小
		{
		    //看看是不是有拖动的后感应区事件
		    if(Panel==undefined)
		    {
			    this.Move_OnlyMove(Id,evt);
		    }
		    else//有感应区
		    {
		        if(fun==undefined)
		        {
		            this.Move_OnlyMove(Id,evt,Panel);
		        }
		        else
		        {
		            this.Move_OnlyMove(Id,evt,Panel,fun);
		        }
		    }
		}
		else
		{
			
		}
	}
	
	//移动函数
	//参数 Id  要移动的层ID 
	//Evt 是 event, window.event; 要在FF 中可以用    e ? e :window.event;
	this.Move_OnlyMove = function(Id,Evt,Panel,fun)
	{
		var o = document.getElementById(Id+"temp");
		if(!o) return;
		evt = Evt?Evt:window.event;//都是FF 才要这么写的
		var relLeft = evt.clientX - o.offsetLeft;//得到左边的 宽度
	    var relTop = evt.clientY - o.offsetTop;//得到上边的 宽度
		//抓取 事件
		if (!window.captureEvents)
		{
	    	o.setCapture(); //指定  抓取 事件
		}
		else
		{
			window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
	    }
		
		//文档的 onmousemove 事件
		document.onmousemove = function(e)
		{
			if (!o) return;
		    e = e ? e : window.event;
		    if (e.clientX - relLeft <= 0)
			    o.style.left = 0 +"px";
		    else if (e.clientX - relLeft >= document.documentElement.clientWidth - o.offsetWidth - 2)
			    o.style.left = (document.documentElement.clientWidth - o.offsetWidth - 2) +"px";
		    else
			    o.style.left = e.clientX - relLeft +"px";
		    if (e.clientY - relTop <= 1)
			    o.style.top = 1 +"px";
		    else if (e.clientY - relTop >= document.documentElement.clientHeight - o.offsetHeight - 30)
			    o.style.top = (document.documentElement.clientHeight - o.offsetHeight - 30) +"px";
		    else
			    o.style.top = e.clientY - relTop +"px";
            
            //加入拖动所感应区
            if(Panel!=undefined)
            {
                try
                {
		            MyMove.Move_evt(Panel,e);
                }
                catch(e)
                {
                    
                }
            }
		}
		
		//文档的 onmouseup 事件
		document.onmouseup = function(e)//eFF里的事件
	    {
		    if (!o) return;
		    if (!window.captureEvents)
		    	o.releaseCapture();
		    else
		    	window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
		    var o1 = document.getElementById(Id);
		    if (!o1) return;
		    var l0 = o.offsetLeft;
		    var t0 = o.offsetTop;
		    var l = o1.offsetLeft;
		    var t = o1.offsetTop;			   
		   MyMove.Move_e(Id, l0 , t0, l, t);
		    document.body.removeChild(o);
		    o = null;
		    
            var  e = e ? e : window.event;//得到当前的事件
            //加入拖动所感应区
            if(Panel!=undefined)
            {
                try
                {
                    if(fun==undefined)
		            {
		                MyMove.Move_evt(Panel,e);
		            }
		            else
		            {
		                MyMove.Move_evt(Panel,e,fun);
		            }
                }
                catch(e)
                {
                    
                }
            }
            
	    }	
	}
	
	this.Move_e = function(Id, l0 , t0, l, t)
    {
	    if (typeof(window["ct"+ Id]) != "undefined") clearTimeout(window["ct"+ Id]);
	    var o = document.getElementById(Id);
	    if (!o) return;
	    var sl = st = 8;
	    var s_l = Math.abs(l0 - l);
	    var s_t = Math.abs(t0 - t);
	    if (s_l - s_t > 0)
		    if (s_t)
			    sl = Math.round(s_l / s_t) > 8 ? 8 : Math.round(s_l / s_t) * 6;
		    else
			    sl = 0;
	    else
		    if (s_l)
		    	st = Math.round(s_t / s_l) > 8 ? 8 : Math.round(s_t / s_l) * 6;
		    else
			    st = 0;
	    if (l0 - l < 0) sl *= -1;
	    if (t0 - t < 0) st *= -1;
	    if (Math.abs(l + sl - l0) < 52 && sl) sl = sl > 0 ? 2 : -2;
	    if (Math.abs(t + st - t0) < 52 && st) st = st > 0 ? 2 : -2;
	    if (Math.abs(l + sl - l0) < 16 && sl) sl = sl > 0 ? 1 : -1;
	    if (Math.abs(t + st - t0) < 16 && st) st = st > 0 ? 1 : -1;
	    if (s_l == 0 && s_t == 0) return;
	    if (Math.abs(l + sl - l0) < 2)
		    o.style.left = l0 +"px";
	    else
		    o.style.left = l + sl +"px";
	    if (Math.abs(t + st - t0) < 2) 
		    o.style.top = t0 +"px";
	    else
		    o.style.top = t + st +"px";
	    window["ct"+ Id] = window.setTimeout("MyMove.Move_e('"+ Id +"', "+ l0 +" , "+ t0 +", "+ (l + sl) +", "+ (t + st) +")", 1);
    }
}


//对它拖动类进行封装
Tong_MoveDiv.prototype={
    Move_evt
    :function(ssid,Evt,fun)
    {/// <summary>
     /// 传入范围的 容器ID 
     /// 返回鼠标当前的位置是不是在
     /// 传入的范围内
     //  当鼠标松开时如果也在 范围内则执行 传入的方法 fun
     /// </summary>
     ///<param name="ssid">容器ID</param>
         var obj  = document.getElementById(ssid);//将传入ID转成对象
         var t = obj.offsetHeight;//相对高度  : obj.offsetWidth//当前对象的宽度
         var l =+obj.offsetWidth;//相对的左边 : obj.offsetHeight//当前对象的高度
         var e =  Evt ? Evt : window.event;//得到当前鼠标或事件的位置 这里是鼠标
         var evt = e ? e : window.event;
         //得到当前的鼠标的位置
         var m_l = evt.clientX-obj.offsetLeft;
         var m_t= evt.clientY-obj.offsetTop;
         try
         {
                //在容器里
                if(m_l<=l&&m_t<=t&&m_l>0&&m_t>0)
                {
                    obj.style.backgroundColor="#FFFFD7";
                    if(fun!=undefined)
                    {
                        eval(fun);//执行传入函数
                    }
                }
                else
                {
                     obj.style.backgroundColor="#ffffff";
                }
         }
         catch(e)
         {
           // alert(e);
         }
    }
}
var MyMove = new  Tong_MoveDiv();
//----------------------------------

//  ]]> 
</script>

<script type="text/javascript">
function cu(objid)
{
    var newsclassid=objid.replace("Menu_Tree","");
    loand('n',newsclassid);
     alert(newsclassid);
}
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <div class="Menu_Main" id="Menu_Main">请拖动右边的菜单进行新闻加载
    </div>
    <div  class="Right_Menu">
    <%Response.Write(xmlcont); %>
    </div>
    </div>
    
   <div  style="text-align:right; clear:left;width: 1100px;" id="Pagelist">分页</div>
<script type="text/javascript">
var _totalItem =0;//总记录数
var ChangePage ="changePage";//分页的函数
var _status = 'k';//类型
var _startPage = 1;//开始页面
var _itemPerPage = 20; //每页显示数
var _curPage = 0;//当前页
var _parent ='0';
var page_contid="fxA1";//分页内容的ID

function loand(txxType,txxClass)
{/// <summary>
/// 传入 游戏的类型ID  问题的类别 返回的LIST
/// </summary>
/// <param name="txxType">读取问题类型</param>
/// <param name="txxClass">问题的分类类别</param>
///Exam: GetGamesData('n','6','1');

    GetGamesData(txxType,txxClass,'1');
    _curPage =0;//当前页为0
     _parent = txxClass;//分类
    _status=txxType; //类型
    page_contid="Menu_Main";//装分页内容的ID
    document.getElementById("Pagelist").innerHTML="";
}
function GetGamesData(pp,ss,page)
{/// <summary>
/// 传入 类型ID  问题的类别 返回的LIST
/// </summary>
/// <param name="pp">类型</param>
/// <param name="ss">类别</param>
/// <param name="page">当前页</param>
/// <returns></returns>
    var GamesAjaxDataValue = new AJAXRequest(); 
    GamesAjaxDataValue.get('NewsList.aspx?Type='+pp+'&status='+ss+"&page="+page,GameData);
   // $("dd").innerHTML ='/Iask/User/ability/QuestionList.aspx?Type='+pp+'&status='+ss+"&page="+page;
}

function GameData(obj)
{
   var xmlobj = obj.responseText;
    try
    {
            var tab =xmlobj;
            document.getElementById(page_contid).innerHTML = obj.responseText;
             
    }
    catch(e)
    {
        //alert(e);
    }
    
    eval(obj.responseXML.getElementsByTagName("Xzone").item(0).firstChild.data); //执行 setAskTotal
    
}

function setAskTotal(total)
{
	createPageList(document.getElementById('Pagelist'), _startPage,  total, _itemPerPage,_curPage, ChangePage);
}

///分页得到数据的函数
function changePage(_pg, status, parent)
{

try
{
	_curPage = _pg || 1;
	_status = (status == "" || typeof status == "undefined") ? _status : status;
	_parent = (parent == ""  || typeof parent == "undefined") ? _parent : parent;
	//_startPage=_pg || 1;
	_startPage= 1;//当前页面 开始页面
	
}
catch(e)
{
    alert(e);
}
    document.getElementById(page_contid).innerHTML="<div style=\"text-align:center;\"><img src='/IAsk/User/images/loading.gif'>正在搜索...</div>";
	GetGamesData(_status,_parent , _curPage);//得到数据
	createPageList(document.getElementById('Pagelist'), _startPage, _totalItem, _itemPerPage,_curPage, ChangePage);
	return ;
}

//_con 对像 div
//_startPg 开始分页的页面
// _totalItem //总记录
// _itemPerPg //每页显示数
/// _curPg// 当前页 第几页 
/// _act// 要写入执行得到数据的函数
function createPageList(_con, _startPg, _totalItem, PageSize, _curPg,  _act)
{
var str = '';
try
{	
    if (_curPg == 0) _curPg = 1;

	var _pgCount = Math.ceil(_totalItem/PageSize);
	_pgCount = _pgCount || 1;
	////
	
	str += '共'+ (_pgCount-1) +'页';
	str += '&nbsp;&nbsp;|&nbsp;&nbsp;';
	if (_curPg == _startPg)
	 {
	 	str += '&nbsp;当前第 '+_curPg+' 页&nbsp;|&nbsp;';
		str += '第一页';
		str += '&nbsp;';
		str += '上一页';
	}
	else 
	{
	
	 	str += '&nbsp;当前第 '+_curPg+' 页&nbsp;|&nbsp;';
		str += '<a href="#"  onclick="'+_act+'('+_startPg+');return false;">第一页</a>';
		str += '&nbsp;';
		str += '<a href="#" onclick="'+_act+'('+(_curPg-1)+');return false;">上一页</a>';
	}
	
		str += '&nbsp;';
	for (var i=_startPg; i<=_pgCount; i++) {
		if (i == _curPg) {
			str += i;
			str += '&nbsp;';
		}
		else if (i>=_curPg-5 && i<=_curPg+5) {
			str += '<a href="#" onclick="'+_act+'('+i+');return false;">'+i+'</a>';
			str += '&nbsp;';
		}
		else if (i == _curPg-6 || i == _curPg+6) {
			str += '...&nbsp;';
		}
	}
	if (_curPg == _pgCount) {
		str += '下一页';
		str += '&nbsp;';
		str += '最末页';
	}
	else
	{
		str += '<a href="#" onclick="'+_act+'('+(_curPg+1)+');return false;">下一页</a>';
		str += '&nbsp;';
		str += '<a href="#" onclick="'+_act+'('+(_pgCount-1)+');return false;">最末页</a>';
	}
 }
 catch(e)
 {
    _con.innerHTML += "<br/>页面 较少";
 }
 _con.innerHTML ="<br/>&nbsp;&nbsp;&nbsp;&nbsp;"+str; //写入str
}
</script>
    </form>
</body>
</html>
